<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 450px;
            height: 408px;
            margin: 0 auto;
            /* background-color: rgb(199, 36, 36); */
        }
        
        li {
            width: 100px;
            height: 100px;
            background-color: rgb(182, 116, 202);
            border: 1px wheat solid;
            float: left;
            list-style: none;
        }
        
        .hh {
            height: 50px;
            font-size: 30px;
        }
        
        .hh span {
            font-size: 30px;
        }
        
        ul {
            margin-top: 10px;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div>
        <div class="hh">分数为
            <span class="fen">0</span></div> <span>倒计时:</span><span class="dao">30秒</span>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

</html>
<script>
    var li = document.querySelectorAll("li");
    console.log(li);
    var fen = document.querySelector(".fen");
    var dao = document.querySelector(".dao");
    //随机数
    function suji() {
        return Math.floor(Math.random() * 24)
    }
    // 随机变色
    var b = 0;
    var c = 0;
    var a = 0;
    var index = 0;
    var arr = [];
    var dian = setInterval(function() {
            li[b].style.backgroundColor = "rgb(182, 116, 202)";
            for (var i = 0; i <= 1; i++) {
                a = suji();
                if (a == b) {
                    i--
                } else {
                    console.log(a);
                    // b = a;
                }
            }
            // a = suji();
            li[a].style.backgroundColor = "red";
            b = a;
            for (var i = 0; i < li.length; i++) {
                li[i].onclick = function() {
                    if (this.style.backgroundColor == "red" && index != a) {
                        c++;
                        fen.innerHTML = c;
                        console.log(index, a);
                        index = a;
                        // this.style.backgroundColor = "rgb(182, 116, 202)";
                    }
                }
            }

        }, 1000)
        // 倒计时
    var daojishi = 30;
    var ji = setInterval(function() {
        daojishi--;
        dao.innerHTML = daojishi + "秒";

        if (daojishi == 0) {
            clearInterval(dian);
            clearInterval(ji);
            alert("游戏结束");
        }
    }, 1000)
</script>